<template>
  <div class="wrap">
    <div class="box">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
      <div id="myChart" :style="{width: '70%', height: '150px',margin:'0 auto'}"></div>
    </div>
  </div>
</template>
<script>
import GLOBAL from "@/components/global_variable";
import { getPushTypeNumber } from "../../core/api/yuyan/index";
export default {
  data() {
    return {};
  },
  created() {
    document.addEventListener("deviceready", onDeviceReady, false); // 等待cordova加载
    // cordova加载完成
    let that = this;
    function onDeviceReady() {
      // 如果需要页面加载完成后，就调用平台的API，必须加在此处。加在onload里面不行。
      MXCommon.getCurrentUser(function (result) {
        // 这里可以处理获取到的当前用户数据,result是object类型
        console.log(result);
        console.log("用户姓名" + result.name);
        console.log("用户登录名ID" + result.login_name);
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        that.getOnlineBack();
      });
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        backgroundColor: "#fff",
        color: ["#3D91F7", "#61BE67"],

        legend: {
          show: true,
          icon: "circle",
          bottom: 30,
          center: 0,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 21,
          orient: "horizontal",
          data: ["a", "b"],
          textStyle: {
            fontSize: "70%",
            color: "#8C8C8C",
          },
        },

        radar: {
          // shape: 'circle',
          radius: "100%",
          triggerEvent: true,
          shape: "circle",
          splitNumber: 3,
          name: {
            textStyle: {
              color: "#fff",
              fontSize: "20",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          nameGap: "2",
          indicator: [
            {
              // [4300, 10000, 28000, 35000, 50000, 19000, 21000]
              max: 100,
            },
            { max: 100 },
            { max: 100 },
            { max: 100 },
            { max: 100 },
          ],
          splitArea: {
            areaStyle: {
              color: [
                "rgba(222,134,85, 0.1)",
                "rgba(222,134,85, 0.2)",
                "rgba(222,134,85, 0.4)",
                "rgba(222,134,85, 0.6)",
                "rgba(222,134,85, 0.8)",
                "rgba(222,134,85, 1)",
              ].reverse(),
            },
          },
          // axisLabel:{//展示刻度
          //     show: true
          // },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              width: 0,
              color: [
                "rgba(224,134,82, 0.1)",
                "rgba(224,134,82, 0.2)",
                "rgba(224,134,82, 0.4)",
                "rgba(224,134,82, 0.6)",
                "rgba(224,134,82, 0.8)",
                "rgba(224,134,82, 1)",
              ].reverse(),
            },
          },
        },

        series: [
          {
            name: "一级权重分析",
            type: "radar",
            // areaStyle: {normal: {}},

            symbolSize: 0,

            data: [
              {
                value: [43, 100, 28, 35, 50],
                name: "因素",
                areaStyle: {
                  normal: {
                    color: "rgba(252,211,3, 0.3)",
                  },
                },
                lineStyle: {
                  normal: {
                    color: "rgba(252,211,3, 1)",
                    width: 1,
                  },
                },
              },
              {
                value: [28, 35, 50, 43, 100],
                name: "因素",
                areaStyle: {
                  normal: {
                    color: "red",
                  },
                },
                lineStyle: {
                  normal: {
                    color: "rgba(252,211,3, 1)",
                    width: 1,
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 500px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding-top: 100px;
  .div1 {
    width: 50px;
    height: 30px;
    background: greenyellow;
    position: absolute;
    top: 0;
    left: 50%;
  }
  .div2 {
    width: 50px;
    height: 30px;
    background: greenyellow;
    position: absolute;
    top: 45%;
    left: 0;
  }
  .div3 {
    width: 50px;
    height: 30px;
    background: greenyellow;
    position: absolute;
    top: 45%;
    right: 0;
  }
  .div4 {
    width: 50px;
    height: 30px;
    background: greenyellow;
    position: absolute;
    top: 80%;
    left: 30%;
  }
  .div5 {
    width: 50px;
    height: 30px;
    background: greenyellow;
    position: absolute;
    top: 80%;
    right: 30%;
  }
}
</style>
